<!Doctype html>
<html>
<head>
    <title>Node.js Application</title>    
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        @font-face {
            font-family: "Segoe UI";
            src: url('fonts/segoeuil.ttf');
        }

        .main-container {
            height: 100%;
            width: 100%;
            background-color: #1d539d;
            color: white;
            padding-top: 6%;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
            font-family: "Segoe UI";
        }

        .cloud-image {
            width: 1200px;
            height: 250px;
            padding-bottom: 50px;
            margin: auto;
        }

        .success-text {
            padding-bottom: 20px;
            font-size: 62px;
            line-height: 73px;
        }

        .description {
            font-size: 34px;
            line-height: 40px;
        }

        .next-steps-container {
            padding-top: 50px;
        }

        .next-steps-header {
            font-size: 24px;
            line-height: 28px;
            padding-bottom: 25px;
        }

        .next-steps-body {
            display: flex;
            flex-direction: column;
        }

        .step {
            display: flex;
            margin: 7px 0px;
            font-size: 15px;
            line-height: 21px;
        }

        .step-icon {
            height: 20px;
            width: 20px;
            margin-right: 10px;
        }

        .step-text a {
            color: white;
            text-decoration: none;
        }

            .step-text a:hover {
                color: white;
                text-decoration: underline;
            }

        .content {
            box-sizing: border-box;
            min-width: 700px;
            max-width: 830px;
            position: relative;
            margin: auto;
        }

        .tweet-container {
            min-width: 30px;
            min-height: 100px;
            margin: 0 20px;
            position: absolute;
            left: -100px;
            top: 110px;
        }

        .content-body {
            min-width: 400px;
        }

        @media (max-width: 1024px) {
            .main-container {
                padding-top: 1%;
            }

            .cloud-image {
                padding-bottom: 30px;
            }

            .next-steps-container {
                padding-top: 30px;
            }

            .next-steps-header {
                padding-bottom: 20px;
            }

            .success-text {
                font-size: 50px;
                line-height: 61px;
                padding-bottom: 10px;
            }

            .description {
                font-size: 26px;
                line-height: 30px;
            }

            .step {
                font-size: 12px;
                line-height: 18px;
            }

            .tweet-container {
                top: 80px;
            }

            .content {
                max-width: 630px;
                min-width: 630px;
            }
        }

    </style>
</head>
<body>
    <div class="main-container">
        <div class="cloud-image">
            <svg xmlns="http://www.w3.org/2000/svg" width="642" height="245" viewBox="0 0 642 245"><path d="M293.6 243.1C255.8 235.5 228.3 201.2 228.3 161.5 228.3 121.8 255.7 87.8 292.9 80 299 40.7 332.6 10.8 371.7 10.8 385.2 10.8 398.4 14.3 410.2 20.9 422 27.5 431.8 37.1 438.9 48.6 449.9 43.1 462 40.3 474.3 40.3 508.5 40.3 538.9 62.3 550.8 94.8 568.9 90.9 587.9 93.9 604 103.1 620.1 112.3 632.2 127.1 638.1 144.7 644 162.3 643.2 181.5 635.9 198.5 628.5 215.6 615.2 229.3 598.4 237.2L597.2 237.7C590.2 240.9 582.6 243 574.9 243.8 574.3 243.9 573.6 243.9 573 244 563.2 244.8 550 245 528.9 245L309.4 245C304.1 245 298.7 244.3 293.6 243.1L293.6 243.1Z" fill="#0078D7" /><path d="M35.6 146.3C30.7 146.3 26.1 147.3 21.8 149.1 17.5 151 13.7 153.5 10.5 156.7 7.2 159.8 4.7 163.6 2.9 167.9 1 172.2 0 176.8 0 181.8 0 186.8 0.9 191.4 2.8 195.7 4.6 200 7.2 203.7 10.4 207 13.6 210.2 17.3 212.7 21.6 214.6 25.9 216.4 30.5 217.3 35.4 217.3L141.5 217.3C148 217.3 154.1 216.1 159.9 213.6 165.6 211.2 170.6 207.8 174.9 203.6 179.1 199.3 182.5 194.2 184.9 188.5 187.4 182.7 188.6 176.5 188.6 170 188.6 163.5 187.4 157.3 184.9 151.6 182.5 145.8 179.1 140.8 174.9 136.5 170.6 132.2 165.6 128.8 159.9 126.4 154.1 123.9 148 122.7 141.5 122.7 138.6 122.7 135.8 122.9 132.9 123.5 130.4 119.7 127.6 116.3 124.4 113.2 121.2 110.2 117.6 107.6 113.8 105.5 110 103.4 106 101.8 101.7 100.7 97.4 99.6 93 99 88.4 99 81.6 99 75.2 100.2 69.2 102.6 63.1 105 57.7 108.3 53.1 112.6 48.4 116.8 44.5 121.8 41.5 127.6 38.5 133.4 36.5 139.6 35.6 146.3Z" fill="#0078D7" /><path d="M242.3 23.5C244.7 23.5 247 24 249.1 24.9 251.3 25.8 253.2 27.1 254.8 28.6 256.4 30.2 257.6 32.1 258.6 34.2 259.5 36.3 260 38.7 260 41.1 260 43.6 259.5 45.9 258.6 48 257.7 50.1 256.4 52 254.8 53.6 253.2 55.2 251.4 56.5 249.2 57.4 247.1 58.3 244.8 58.8 242.4 58.8L189.9 58.8C186.6 58.8 183.6 58.1 180.7 56.9 177.9 55.7 175.4 54 173.3 51.9 171.2 49.8 169.5 47.3 168.3 44.4 167.1 41.6 166.5 38.5 166.5 35.3 166.5 32 167.1 29 168.3 26.1 169.5 23.2 171.2 20.7 173.3 18.6 175.4 16.5 177.9 14.8 180.7 13.6 183.6 12.4 186.6 11.8 189.9 11.8 191.3 11.8 192.7 11.9 194.1 12.2 195.3 10.3 196.7 8.6 198.3 7.1 199.9 5.5 201.7 4.3 203.5 3.2 205.4 2.2 207.4 1.4 209.6 0.8 211.7 0.3 213.9 0 216.1 0 219.5 0 222.7 0.6 225.7 1.8 228.7 3 231.4 4.6 233.7 6.7 236 8.8 237.9 11.3 239.4 14.2 240.9 17.1 241.9 20.2 242.3 23.5Z" fill="#0078D7" /><path d="M195.1 76.4C188.2 76.4 181.7 77.7 175.7 80.3 169.5 82.9 164.2 86.4 159.8 90.9 155.2 95.3 151.6 100.6 149 106.6 146.3 112.7 145 119.2 145 126.2 145 133.1 146.3 139.6 148.9 145.7 151.5 151.6 155 156.9 159.6 161.5 164.1 166 169.4 169.5 175.4 172.1 181.4 174.7 187.9 176 194.7 176L343.8 176C352.9 176 361.5 174.3 369.6 170.8 377.7 167.4 384.7 162.6 390.7 156.7 396.7 150.6 401.4 143.6 404.8 135.5 408.3 127.4 410 118.8 410 109.6 410 100.4 408.3 91.8 404.8 83.8 401.4 75.7 396.7 68.6 390.7 62.7 384.7 56.6 377.7 51.8 369.6 48.4 361.5 44.9 352.9 43.2 343.8 43.2 339.8 43.2 335.8 43.6 331.7 44.4 328.3 39 324.3 34.2 319.8 30 315.2 25.6 310.3 22 304.9 19.1 299.6 16.1 293.9 13.9 287.9 12.3 281.8 10.8 275.6 10 269.2 10 259.6 10 250.6 11.7 242.2 15.1 233.6 18.4 226.1 23.1 219.5 29.1 213 34.9 207.6 41.9 203.4 50.1 199 58.2 196.3 67 195.1 76.4Z" fill="#00BCF2" /><path d="M357 143C357 171.7 333.7 195 305 195 276.3 195 253 171.7 253 143 253 114.3 276.3 91 305 91 333.7 91 357 114.3 357 143Z" fill="#0078D7" /><path d="M305 78C310.9 78 316.5 78.8 322 80.3 327.5 81.8 332.5 84 337.3 86.8 342 89.5 346.3 92.9 350.2 96.8 354.1 100.7 357.5 105 360.3 109.8 363 114.5 365.2 119.5 366.7 125 368.2 130.5 369 136.1 369 142 369 147.9 368.2 153.5 366.7 159 365.2 164.5 363 169.6 360.3 174.3 357.5 179 354.1 183.3 350.2 187.3 346.3 191.1 342 194.5 337.3 197.3 332.5 200 327.5 202.2 322 203.8 316.5 205.3 310.9 206 305 206 299.1 206 293.5 205.3 288 203.8 282.5 202.2 277.4 200 272.7 197.3 268 194.5 263.7 191.1 259.8 187.3 255.9 183.3 252.5 179 249.8 174.3 247 169.6 244.8 164.5 243.3 159 241.8 153.5 241 147.9 241 142 241 136.1 241.8 130.5 243.3 125 244.8 119.5 247 114.5 249.8 109.8 252.5 105 255.9 100.7 259.8 96.8 263.7 92.9 268 89.5 272.7 86.8 277.4 84 282.5 81.8 288 80.3 293.5 78.8 299.1 78 305 78ZM342.7 120.8L334.2 112.3 293 153.5 275.8 136.3 267.3 144.8 293 170.5 342.7 120.8Z" fill="#FFF" /></svg>
        </div>
        <div class="content">
            <div class="tweet-container">
                <a href="http://twitter.com/intent/tweet/?text=I%20just%20created%20a%20new%20Node.js%20website%20on%20Azure%20using%20Azure%20DevOps%20Project&hashtags=AzureDevOpsProject%2CVSTS%20%40Azure%20%40VSTS">
                    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="52" viewBox="0 0 56 52"><path d="M56 0L0 0 0 38.733 36.012 38.733 49 51.8 49 38.733 56 38.733 56 0Z" fill="#0078D7" /><path d="M23.128 29.39C33.037 29.39 38.455 21.135 38.455 13.977 38.455 13.742 38.45 13.509 38.44 13.276 39.492 12.512 40.406 11.557 41.127 10.471 40.162 10.903 39.123 11.193 38.034 11.324 39.146 10.653 40 9.592 40.403 8.328 39.362 8.948 38.209 9.399 36.982 9.643 35.999 8.59 34.599 7.931 33.05 7.931 30.074 7.931 27.662 10.357 27.662 13.348 27.662 13.773 27.709 14.186 27.802 14.583 23.324 14.356 19.354 12.201 16.697 8.923 16.235 9.723 15.968 10.653 15.968 11.646 15.968 13.525 16.919 15.184 18.365 16.155 17.481 16.127 16.651 15.883 15.925 15.477 15.925 15.5 15.925 15.522 15.925 15.547 15.925 18.17 17.781 20.361 20.246 20.857 19.794 20.981 19.317 21.048 18.826 21.048 18.479 21.048 18.142 21.013 17.813 20.95 18.499 23.102 20.488 24.669 22.846 24.712 21.002 26.166 18.679 27.031 16.155 27.031 15.721 27.031 15.292 27.006 14.87 26.956 17.254 28.493 20.085 29.39 23.128 29.39" fill="#FFF" /></svg>
                    </a>
            </div>
            <div class="content-body">
                <div class="success-text">Success!</div>
                <div class="description line-1"> Azure DevOps Project has been successfully setup </div>
                <div class="description line-2"> Your Node.js app is up and running on Azure</div>
                <div class="next-steps-container">
                    <div class="next-steps-header">Next up</div>
                    <div class="next-steps-body">
                        <div class="step">
                            <div class="step-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M9 12.4L11.3 12.4 11.3 13.5 5.6 13.5 5.6 12.4 7.9 12.4 7.9 11.2 0 11.2 0 1.1 16.9 1.1 16.9 7.9 15.8 7.9 15.8 2.2 1.1 2.2 1.1 10.1 13.5 10.1 13.5 11.2 9 11.2 9 12.4ZM18 13.2L15.2 16 12.4 13.2 13.2 12.4 14.6 13.8 14.6 9 15.8 9 15.8 13.8 17.2 12.4 18 13.2Z" fill="#fff" /></svg>
                            </div>
                            <div class="step-text"><a href="https://go.microsoft.com/fwlink/?linkid=862409">Clone your code repository and start developing your application on IDE of your choice</a></div>
                        </div>
                        <div class="step">
                            <div class="step-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M8.4 7.6L11.1 10.3 10.3 11.1 9 9.8 9 15.7 7.9 15.7 7.9 9.8 6.6 11.1 5.8 10.3 8.4 7.6ZM1.1 1.1L5.6 1.1 5.6 5.6 1.1 5.6 1.1 1.1ZM6.7 1.1L11.2 1.1 11.2 5.6 6.7 5.6 6.7 1.1ZM16.9 1.1L16.9 5.6 12.4 5.6 12.4 1.1 16.9 1.1Z" fill="#fff" /></svg>
                            </div>
                            <div class="step-text"><a href="https://go.microsoft.com/fwlink/?linkid=862410">View your CI/CD pipeline on Visual Studio Team Services and customize it as per your needs</a></div>
                        </div>
                        <div class="step">
                            <div class="step-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M11.9 3.4L6.3 3.4 6.3 2.3 11.9 2.3 11.9 3.4ZM11.9 12.4L6.3 12.4 6.3 11.3 11.9 11.3 11.9 12.4ZM11.9 14.6L6.3 14.6 6.3 13.5 11.9 13.5 11.9 14.6ZM13 0C13.2 0 13.3 0 13.4 0.1 13.6 0.1 13.7 0.2 13.8 0.3 13.9 0.4 14 0.6 14 0.7 14.1 0.8 14.1 1 14.1 1.1L14.1 16.9 4 16.9 4 1.1C4 1 4 0.8 4.1 0.7 4.1 0.6 4.2 0.4 4.3 0.3 4.4 0.2 4.6 0.1 4.7 0.1 4.8 0 5 0 5.1 0L13 0ZM13 1.1L5.1 1.1 5.1 15.8 13 15.8 13 1.1Z" fill="#fff" /></svg>
                            </div>
                            <div class="step-text"><a href="http://portal.azure.com">View your service stack in the Azure Portal</a></div>
                        </div>
                        <div class="step">
                            <div class="step-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path d="M9.01 0C9.61 0 10.11 0.1 10.61 0.2 11.21 0.4 11.71 0.6 12.11 0.8 12.61 1.1 13.01 1.4 13.41 1.8 13.71 2.2 14.11 2.6 14.31 3.1 14.61 3.5 14.81 4 15.01 4.5 15.11 5.1 15.21 5.6 15.21 6.2 15.21 7 15.01 7.8 14.71 8.6 14.41 9.3 13.91 9.9 13.31 10.5 12.81 11 12.51 11.5 12.21 12.1 11.91 12.7 11.81 13.4 11.81 14.1L11.81 16.3C11.81 16.5 11.81 16.8 11.71 17 11.61 17.2 11.51 17.4 11.31 17.5 11.21 17.7 11.01 17.8 10.81 17.9 10.61 18 10.31 18 10.11 18L7.91 18C7.61 18 7.41 18 7.21 17.9 7.01 17.8 6.81 17.7 6.71 17.5 6.51 17.4 6.41 17.2 6.31 17 6.21 16.8 6.21 16.5 6.21 16.3L6.21 14.1C6.21 13.4 6.01 12.7 5.81 12.1 5.51 11.5 5.11 11 4.71 10.5 4.11 9.9 3.61 9.3 3.31 8.6 3.01 7.8 2.81 7 2.81 6.2 2.81 5.6 2.91 5.1 3.01 4.5 3.21 4 3.41 3.5 3.61 3.1 3.91 2.6 4.21 2.2 4.61 1.8 5.01 1.4 5.41 1.1 5.91 0.8 6.31 0.6 6.81 0.4 7.31 0.2 7.91 0.1 8.41 0 9.01 0ZM10.11 16.9C10.31 16.9 10.41 16.8 10.51 16.7 10.61 16.6 10.71 16.5 10.71 16.3L10.71 14.6 7.31 14.6 7.31 16.3C7.31 16.5 7.41 16.6 7.51 16.7 7.61 16.8 7.71 16.9 7.91 16.9L10.11 16.9ZM10.71 13.5C10.81 12.7 11.01 12.1 11.31 11.4 11.61 10.8 12.01 10.3 12.51 9.7 13.01 9.2 13.41 8.7 13.71 8.1 13.91 7.5 14.11 6.9 14.11 6.2 14.11 5.5 13.91 4.8 13.61 4.2 13.41 3.6 13.01 3.1 12.61 2.6 12.11 2.2 11.61 1.8 11.01 1.5 10.31 1.3 9.71 1.1 9.01 1.1 8.31 1.1 7.61 1.3 7.01 1.5 6.41 1.8 5.91 2.2 5.41 2.6 5.01 3.1 4.61 3.6 4.31 4.2 4.11 4.8 3.91 5.5 3.91 6.2 3.91 6.9 4.11 7.5 4.31 8.1 4.61 8.7 5.01 9.2 5.41 9.7 6.01 10.3 6.41 10.8 6.71 11.4 7.01 12.1 7.21 12.7 7.31 13.5L10.71 13.5Z" fill="#fff" /></svg>
                            </div>
                            <div class="step-text"><a href="https://go.microsoft.com/fwlink/?linkid=862126">Learn more about all you can do with Azure projects by visiting the documentation</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
